import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { DatePicker } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import { LeftOutlined, RightOutlined } from '#/utils/antdIcons.js';
import { IPickerType } from '../../type';
import styles from './index.less';

interface IProps {
  /**
   * 日期选择器类型
   */
  type?: IPickerType;
  /**
   * 开始时间
   */
  startDate?: string;
  /**
   * 结束时间
   */
  endDate?: string;
  /**
   * 值
   */
  value?: string;
  /**
   * 展示时间样式
   */
  format?: string;
  /**
   * 改变事件
   */
  onChange?: (date: string, type: IPickerType) => void;
}

const SpecialDatePicker = (props: IProps) => {
  const {
    value = moment().format('YYYY-MM-DD'),
    type = IPickerType.DATE,
    format = 'YYYY-MM-DD',
    startDate: _startDate = moment().format('YYYY-MM-DD'),
    endDate: _endDate = moment().format('YYYY-MM-DD'),
    onChange,
  } = props;
  const [checkedDate, setCheckedDate] = useState<string>();
  const startDate =
    type === IPickerType.DATE
      ? moment(_startDate).format('YYYY-MM-DD')
      : moment(_startDate).format('YYYY-MM');
  const endDate =
    type === IPickerType.DATE
      ? moment(_endDate).format('YYYY-MM-DD')
      : moment(_endDate).format('YYYY-MM');
  useEffect(() => {
    if (value) {
      setCheckedDate(value);
    }
  }, [value]);

  // 上一个月/天
  const handelMinus = () => {
    let _date = checkedDate;
    if (type === IPickerType.MONTH) {
      _date = moment(checkedDate).subtract(1, 'month').startOf('month').format('YYYY-MM');
    } else {
      _date = moment(checkedDate).subtract(1, 'day').format('YYYY-MM-DD');
    }
    if (
      !(
        _date &&
        (moment(startDate).endOf('day') > moment(_date).endOf('day') ||
          moment(_date).endOf('day') > moment(endDate).endOf('day'))
      )
    ) {
      setCheckedDate(_date);
      onChange && onChange(_date, type);
    }
  };

  // 上一个月/天
  const handelAdd = () => {
    let _date = checkedDate;
    if (type === IPickerType.MONTH) {
      _date = moment(checkedDate).add(1, 'month').startOf('month').format('YYYY-MM');
    } else {
      _date = moment(checkedDate).add(1, 'day').format('YYYY-MM-DD');
    }
    if (
      !(
        _date &&
        (moment(startDate).endOf('day') > moment(_date).endOf('day') ||
          moment(_date).endOf('day') > moment(endDate).endOf('day'))
      )
    ) {
      setCheckedDate(_date);
      onChange && onChange(_date, type);
    }
  };

  // 切换月份/日期
  const handelDate = (date: any) => {
    let _date = checkedDate;
    if (type === IPickerType.MONTH) {
      _date = moment(date).format('YYYY-MM');
    } else {
      _date = moment(date).format('YYYY-MM-DD');
    }
    setCheckedDate(_date);
    onChange && onChange(_date, type);
  };

  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return (
      current &&
      (moment(startDate).endOf('day') > current || current > moment(endDate).endOf('day'))
    );
  };

  return (
    <div className={styles.container}>
      <div
        className={checkedDate && startDate === checkedDate ? styles.disMinus : styles.minus}
        onClick={() => handelMinus()}
      >
        <LeftOutlined className={styles.logo} />
      </div>
      <div className={styles.topTime}>
        <DatePicker
          picker={type}
          value={moment(checkedDate)}
          format={format}
          onChange={handelDate}
          allowClear={false}
          showToday={false}
          disabledDate={disabledDate}
        />
      </div>
      <div
        className={checkedDate && endDate === checkedDate ? styles.disAdd : styles.add}
        onClick={() => handelAdd()}
      >
        <RightOutlined className={styles.logo} />
      </div>
    </div>
  );
};

export default SpecialDatePicker;
